<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Simple Grid Of Complex Type</title>

<link href="/M2MJS/style/M2MJsDefault.css" rel="stylesheet" type="text/css" />

<style type="text/css">
  .borderBottom td, th{
  	border-bottom:1px solid;
  }
  
  .noBorderBottom td, th{
  	border-bottom:0px solid;
  }
  
  .overGridRow {
  	background-color: #fafafa!important;
  	border-bottom:1px solid;
  }
  
  .selectedGridRow{
  	background-color: #d2e3b9!important;
  }
</style>

<script type="text/javascript" src="/M2MJS/M2MJS/M2MJSCommon/XBrowser.js"></script>
<script type="text/javascript" src="/M2MJS/M2MJS/M2MJSBind/Bind.js"></script>
<script type="text/javascript" src="/M2MJS/M2MJS/M2MJSGrid/Grid.js"></script>

<script type="text/javascript" src="/M2MJS/M2MJS/M2MJSCommon/Connection.js"></script>
<script type="text/javascript" src="/M2MJS/M2MJS/M2MJSCommon/TemplateLoader.js"></script>

<script type="text/javascript">
//////////
// Data //
/////////


var data = [
	{id:"1", name:"Marcello", last: "Podda", address: {street: "Vasiliadi", number: "2", town: "Nea Ionia", country:{name:"Greece", intl:"GR"}}, dateOfBirth:"6/3/1971", phone:{mobile: "+306937001067", work:"+302108899365", privat:"+302105566789"}},
	{id:"2", name:"Zoe", last: "Heart", address: {street: "25th Str.", number: "25", town: "New York", country:{name:"United States of America", intl:"USA"}}, dateOfBirth:"26/8/1985", phone:{mobile: "+1514455678", work:"+1519988456", privat:"+1513355256"}},
	{id:"3", name:"James", last: "Best", address: {street: "Berliner Strasse", number: "25", town: "Berlin", country:{name:"Germany", intl:"DE"}}, dateOfBirth:"26/3/1999", phone:{mobile: "+1514455678", work:"+1519988456", privat:"+1513355256"}}
];


//var data;
</script>


<script type="text/javascript">
//////////
// Grid //
//////////

var simpleGrid;
</script>


<script type="text/javascript">
//////////////
//Renderers //
//////////////

// Object.prototype.showAddress = function(){
// 	var addressDiv = document.createElement("div");
	
// 	addressDiv.innerHTML = "bgbg";
	
// 	return addressDiv;
// }

var phoneTemplate;

Object.prototype.age = function(){
	
 	var today = new Date();
 	var yearOfBirth =  this["dateOfBirth"].split("/")[2];

 	//return today.getFullYear().toString();
 	var age1 = today.getFullYear() - new Number (yearOfBirth);
	
 	return age1.toString();
}

Object.prototype.getCountry = function(){
	return this["name"] + " (" + this["intl"] + ")";
}

Object.prototype.setId = function(){
	return this["id"];	
}

Object.prototype.showPhones = function(){
	var phones = new Array();
	phones.push(this["phone"]);
	var phoneContainer = document.createElement("table");
	var phoneGrid = new Grid(phones, phoneContainer, phoneTemplate);
	phoneGrid.rowMouseOverClass = "";
	phoneGrid.rowSelectedClass = "";
	
	phoneGrid.renderGrid();
	
	return phoneGrid.gridContainer;
}

</script>

<script type="text/javascript">
////////////////////////
// My Grid Operations //
////////////////////////

function editGridRow(edit){
	//Make sure that row is selected to get the right data
	simpleGrid.onGridRowSelect = function(gridRow){
		//Make sure that only on button click and not on each  click on the row  
		if (edit){
			alert(simpleGrid.modelObject["id"]);
		}
		edit = false;
	};
}

</script>

<script type="text/javascript">
//////////
// Init //
//////////

var gridRowTemplateLoader = new TemplateLoader("/M2MJS/GridTemplates/SomeGridTemplates.html");
var gridRowTemplate = gridRowTemplateLoader.loadTemplate("gridRowContainer");
/*var */ phoneTemplate =  gridRowTemplateLoader.loadTemplate("telephoneContainer");

function init(){
	simpleGrid = new Grid(data, document.getElementById("gridContainer"), /*document.getElementById("gridRowContainer")*/gridRowTemplate);
	simpleGrid.renderGrid();
}

</script>


</head>
<body>

<table style="border-collapse: collapse;" cellpadding="10">
	<thead style="background-color: #a1a1a1;">
		<tr class="borderBottom">
			<th>Id</th><th>First</th><th>Last</th><th>Country</th> <th>Date of Birth</th> <th>Age</th><th>Phone</th><th></th>
		</tr>
	</thead>
	<tbody id="gridContainer" style="background-color: #cdcdcd;"></tbody>
</table>




<script type="text/javascript">
	init();
</script>

</body>
</html>